<template>
  <div class="musicsViews" @click="$emit('change-musics-list',item)">
    <div :style="'color:'+(indexs<3?'rgb(223 , 52, 54)':'rgb(153 , 153, 153)')+';' "  class="text2s">{{  indexs+1  <10?  '0'+(indexs+1):indexs+1}}</div>
    <div class="textBoxs">
      <div>
        <span class="text1s">{{ item.al.name }}</span>
      </div>
      <div class="text3s">
        {{ item.ar[0].name }}/ &nbsp;-
        {{ item.al.name }}
      </div>
    </div>

    <div v-show="!isShows" class="bofang">▶
    </div>
    <div v-show="isShows" :class="{ paused: paused }" class="bofangs">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    item: Object,
    indexs: Number,
    isShows: Boolean,
    paused: Boolean,
  },
 
};
</script>

<style lang="scss" scoped>
@keyframes playing {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0.2);

  }
}
.bofangs{
  display: flex;
  margin-left: 25rem;
  margin-top: 5px;
  &.paused {
    div {
        animation-play-state: paused;
      }
    }
  div{
    width: 4rem;
    height: 30rem;
    margin-left:5rem ;
    background-color:red;
    animation: playing .3s linear infinite alternate;

    &:nth-child(1) {
        animation-delay: -0.3s;
      }

      &:nth-child(2) {
        animation-delay: -0.2s;
      }
      &:nth-child(3) {
        animation-delay: -0.1s;
      }
  }

}
body {
  margin: 0;
  padding: 0;
}

.text2s{
    font-size: 17rem;
    width: 40rem;
    text-align: center;
    height: 48rem;
    line-height: 48rem;
    margin-top: -7rem;
}
.text2ss{
    color: rgb(153 , 153, 153);
}
.musicsViews {
  width: 375rem;
  height: 48rem;
  border-bottom: 1rem solid #f4f4f4;
  padding-top: 10rem;
  display: flex;
}
.textBoxs {
  width: 270rem;
  text-align: left;
}
.textBoxs > div {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text1s {
  color: rgb(51, 51, 51);
  font-size: 17rem;
}
.bofang{
  width: 22rem;
  height: 25rem;
  border: 1rem solid #8a8787;
  border-radius: 15rem;
  color: #8a8787;
  text-align: center;
  line-height: 26rem;
  font-size: 12rem;
  padding-left: 3rem;
  margin-top: 5rem;
    margin-left: 30rem;
}
.text3s {
  color: rgb(136, 136, 136);
  font-size: 12rem;
  margin-top: 7rem;
}

</style>